<h2>Customization</h2>
<p>
  Almond.CSS can be customized by indicating some values for color, lightness, font sizes and 
  weights, etc.
</p>
<p>
  Update the table below to see live how each of the properties affect the site, and make it your
  own (for example, change the hue value). Then, you can copy the resulting code and place it on 
  top of your CSS or HTML file and it will apply automatically to your site!
</p>
<p>
  <strong>Important:</strong> this demo requires JavaScript enabled.
</p>
<section>
  <table id="settings">
    <thead>
      <tr>
        <th scope="col">Property</th>
        <th scope="col">Description</th>
        <th scope="col">Default value</th>
        <th scope="col">Current value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row"><code>--primaryH</code></th>
        <td id="primaryH">
          Primary color hue value. This value should be between 0 and 360. <strong>Primary is the color of the main elements (e.g. buttons, titles, etc.)</strong>
        </td>
        <td>210</td>
        <td>
          <input class="input" name="primaryH" type="range" min="0" max="360" value="210" oninput="updateStyles()" aria-labelledby="primaryH" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--primaryS</code></th>
        <td id="primaryS">Primary color saturation value (how vibrant the color wil be). This value should be a percentage 0-100.</td>
        <td>50%</td>
        <td>
          <input class="input" name="primaryS" type="range" min="0" max="100" value="50" data-unit="%" oninput="updateStyles()" aria-labelledby="primaryS" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--primaryL</code></th>
        <td id="primaryL">Primary color lightness value (how light/dark it will be). This value should be a percentage 0-100.</td>
        <td>40%</td>
        <td>
          <input class="input" name="primaryL" type="range" min="0" max="100" value="40" data-unit="%" oninput="updateStyles()" aria-labelledby="primaryL" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--primary-bg</code></th>
        <td id="primary-bg">Primary color background (used as background in certain elements like secondary buttons). This value should be a color.</td>
        <td>white</td>
        <td>
          <input class="input" name="primary-bg" type="color" oninput="updateStyles()" value="#ffffff" aria-labelledby="primary-bg" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--secondaryH</code></th>
        <td id="secondaryH">
          Secondary color hue value. This value should be between 0 and 360. <strong>Secondary is the color of the text and other elements.</strong>
        </td>
        <td>0</td>
        <td>
          <input class="input" name="secondaryH" type="range" min="0" max="360" value="0" oninput="updateStyles()" aria-labelledby="secondaryH" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--secondaryS</code></th>
        <td id="secondaryS">Secondary color saturation value (how vibrant the color wil be). This value should be a percentage 0-100.</td>
        <td>0%</td>
        <td>
          <input class="input" name="secondaryS" type="range" min="0" max="100" value="0" data-unit="%" oninput="updateStyles()" aria-labelledby="secondaryS" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--secondaryL</code></th>
        <td id="secondaryL">Secondary color lightness value (how light/dark it will be). This value should be a percentage 0-100.</td>
        <td>13%</td>
        <td>
          <input class="input" name="secondaryL" type="range" min="0" max="100" value="13" data-unit="%" oninput="updateStyles()" aria-labelledby="secondaryL" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--secondary-bg</code></th>
        <td id="secondary-bg">Secondary color background (used as background in certain elements). This value should be a color.</td>
        <td>white</td>
        <td>
          <input class="input" name="secondary-bg" type="color" oninput="updateStyles()" value="#ffffff" aria-labelledby="secondary-bg" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--font-family</code></th>
        <td id="font-family">Font family to be used. The value should be a list of font names.</td>
        <td>Helvetica, Arial, sans-serif</td>
        <td>
          <input class="input" name="font-family" type="text" oninput="updateStyles()" value="Roboto, Helvetica, Arial, sans-serif" aria-labelledby="font-family" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--font-size-root</code></th>
        <td id="font-size-root">The size of the font at the root level.</td>
        <td>16px</td>
        <td>
          <input class="input" name="font-size-root" type="text" oninput="updateStyles()" value="16px" aria-labelledby="font-size-root" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--font-weight-thin</code></th>
        <td id="font-weight-thin">The font weight for thin text (and for some elements). This should be a value 100-900.</td>
        <td>100</td>
        <td>
          <select class="input" name="font-weight-thin" oninput="updateStyles()" value="100" aria-labelledby="font-weight-thin">
            <option value="100" selected>100</option>
            <option value="200">200</option>
            <option value="300">300</option>
            <option value="400">400</option>
            <option value="500">500</option>
            <option value="600">600</option>
            <option value="700">700</option>
            <option value="800">800</option>
            <option value="900">900</option>
          </select>
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--font-weight-normal</code></th>
        <td id="font-weight-normal">The font weight for regular text (and other elements). This should be a value 100-900.</td>
        <td>200</td>
        <td>
          <select class="input" name="font-weight-normal" oninput="updateStyles()" value="200" aria-labelledby="font-weight-normal">
            <option value="100">100</option>
            <option value="200" selected>200</option>
            <option value="300">300</option>
            <option value="400">400</option>
            <option value="500">500</option>
            <option value="600">600</option>
            <option value="700">700</option>
            <option value="800">800</option>
            <option value="900">900</option>
          </select>
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--font-weight-bold</code></th>
        <td id="font-weight-bold">The font weight for bold text (and for some elements). This should be a value 100-900.</td>
        <td>400</td>
        <td>
          <select class="input" name="font-weight-bold" oninput="updateStyles()" value="400" aria-labelledby="font-weight-bold">
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="300">300</option>
            <option value="400" selected>400</option>
            <option value="500">500</option>
            <option value="600">600</option>
            <option value="700">700</option>
            <option value="800">800</option>
            <option value="900">900</option>
          </select>
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--font-weight-bolder</code></th>
        <td id="font-weight-bolder">The font weight for bolder text (and for some elements). This should be a value 100-900.</td>
        <td>700</td>
        <td>
          <select class="input" name="font-weight-bolder" oninput="updateStyles()" value="700" aria-labelledby="font-weight-bolder">
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="300">300</option>
            <option value="400">400</option>
            <option value="500">500</option>
            <option value="600">600</option>
            <option value="700" selected>700</option>
            <option value="800">800</option>
            <option value="900">900</option>
          </select>
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--line-height</code></th>
        <td id="line-height">The size for the line-height. This is an important value for accessibility.</td>
        <td>1.75rem</td>
        <td>
          <input class="input" name="line-height" type="text" oninput="updateStyles()" value="1.75rem"  aria-labelledby="line-height"/>
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--heading-margin</code></th>
        <td id="heading-margin">The margins applied to the headings (h1-6). This value should be a set of margins.</td>
        <td>1.5rem 0 1rem</td>
        <td>
          <input class="input" name="heading-margin" type="text" oninput="updateStyles()" value="1.5rem 0 1rem" aria-labelledby="heading-margin" />
        </td>
      </tr>
      <tr>
        <th scope="row"><code>--border-radius</code></th>
        <td id="border-radius">The amount of radius (roundness) applied to the border of some elements (e.g. buttons)</td>
        <td>2px</td>
        <td>
          <input class="input" name="border-radius" type="text" oninput="updateStyles()" value="2px" aria-labelledby="border-radius" />
        </td>
      </tr>
    </tbody>
  </table>
</section>

<section class="demo-grid">
  <h2>Source code</h2>
  <p>Copy the following code at the top of your CSS, or in a style on the site's <code>&lt;head&gt;</code>:</p>
  <div>
    <textarea id="source-code" aria-label="CSS source code to copy to your files">:root {
  --primaryH: 210;
  --primaryS: 50%;
  --primaryL: 40%;
  --primary-bg: #ffffff;
  --secondaryH: 0;
  --secondaryS: 0%;
  --secondaryL: 13%;
  --secondary-bg: #ffffff;
  --font-family: Roboto, Helvetica, Arial, sans-serif;
  --font-size-root: 16px;
  --font-weight-thin: 100;
  --font-weight-normal: 200;
  --font-weight-bold: 400;
  --font-weight-bolder: 700;
  --line-height: 1.75rem;
  --heading-margin: 1.5rem 0 1rem;
  --border-radius: 2px;
}</textarea>
  </div>
</section>
<section>
  <h2>Mascot</h2>
  <p>Almond.CSS' mascot: Al, the Chipmunk.</p>
  <img src="./static/chipmunk.svg" alt="Cartoon of Al, the Chipmunk" />
</section>